<template>
  <div class="container bgwhite">
    <div class="infinite-container" style="bottom:50px;">
      <h2 class="tips-title">预约/挂号须知</h2>
      <ul class="tips-list">
        <li v-for="(t, i) in APPOINT_TIPS" :key="i" v-html="(i+1) + '.' + t"></li>
      </ul>
      <div class="pd20">
        <mu-checkbox label="我已阅读并同意预约/挂号须知" v-model="haveRead"/>
      </div>
    </div>
    <div class="fixed-bottom">
      <mu-raised-button class="submit-btn no-shadow" label="预约挂号" fullWidth primary :disabled="!haveRead" @click="toNext()"></mu-raised-button>
    </div>
  </div>
</template>

<script>
import {APPOINT_TIPS} from '@/api/const'
export default {
  data () {
    return {
      haveRead: false,
      APPOINT_TIPS: APPOINT_TIPS
    }
  },
  mounted () {

  },
  watch: {
    'haveRead' (val) {
      if (val) {
        this.next = false
      }
    }
  },
  methods: {
    toNext () {
      this.$router.replace('/appointment/select-department')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  .mu-checkbox-label{
    color:@color-primary
  }
  .tips-list{
    padding:0 20px;
    li{
      margin-bottom:10px;
    }
  }
  .tips-title{
    padding:20px;
  }
</style>
